<template>
  <el-dialog :visible="isDialog" title="添加用户">
    <el-form :model="ruleForm" :rules="rules" label-width="80px" ref="ruleForm">
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="ruleForm.userName"></el-input>
      </el-form-item>
      <el-form-item label="头像" prop="avatar">
        <img :src="server" width="100px" height="100px" alt="" />
        <el-upload :action="action" :on-success="successed">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb，(默认为系统头像)
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="手机" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          show-password
          v-model="ruleForm.password"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-col :span="24">
          <el-select
            v-model="ruleForm.sex"
            placeholder="请选择性别"
            style="width: 100%"
            prop="sex"
          >
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="生日" prop="birthday">
        <el-col :span="24">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="ruleForm.birthday"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="个性签名" prop="sign">
        <el-input type="textarea" v-model="ruleForm.sign"></el-input>
      </el-form-item>
    </el-form>
    <el-row type="flex" justify="center" align="center">
      <el-col :span="6">
        <el-button>取消</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="add">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('user', ['isDialog'])
  },
  data () {
    return {
      userInfo: {},
      action: '/api/admin/upLoadImg',
      server: 'http://localhost:3000/images/avatar/monkey.png',
      ruleForm: {
        userName: '',
        avatar: '/images/avatar/monkey.png',
        phone: '',
        password: '',
        sex: '',
        birthday: '',
        sign: ''
      },
      rules: {},
      fileList: []
    }
  },
  methods: {
    successed (res) {
      this.server = 'http://localhost:3000/images/avatar/' + res.data[0].filename
      this.ruleForm.avatar = '/images/avatar/' + res.data[0].filename
    },
    add () {
      this.$emit('add', this.ruleForm)
    }
  }
}
</script>

<style lang="less">
.dialog {
  width: 720px;
  border: 1px solid #000;
  div {
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
}
</style>
